<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/REC-html4/loose.dtd">
<html>
<head>
<meta http-equiv="content-type" content="text/html;charset=UTF-8">
<meta http-equiv="content-style-type" content="text/css">
<meta http-equiv="content-script-type" content="text/javascript">
<title>アメブロCSSメーカー [サイドメニュータイトル]</title>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<script type="text/javascript">
google.load('jquery', '1.6.1');
</script>
<script type="text/javascript">
function mkcss() {
  var v_selector = jQuery('#selector').val();
  var v_height   = jQuery('#height').val();
  var v_align    = jQuery('#align').val();
  var v_weight   = jQuery('#weight').val();
  var v_color    = jQuery('#color').val();
  var v_bgcol    = jQuery('#bgcol').val();
  var v_image    = jQuery('#image').val();
  var v_origin   = jQuery('#origin').val();
  var v_repeat   = jQuery('#repeat').val();
  var result = '';
  
  result += v_selector;
  result += '{' + "\n";
  if (v_height != '') {
    result += 'padding-top:0;' + "\n";
    result += 'padding-bottom:0;' + "\n";
    result += 'height:auto;' + "\n";
    result += 'line-height:' + v_height + 'px;' + "\n";
  }
  if (v_align != '') {
    if (v_align == 'hide') {
      result += 'text-indent:-9999px;' + "\n";
    } else {
      result += 'text-align:' + v_align + ';' + "\n";
    }
  }
  if (v_weight != '') { result += 'font-weight:' + v_weight + ';' + "\n"; }
  if (v_color  != '') { result += 'color:' + v_color + ';' + "\n"; }
  if (v_bgcol  != '') { result += 'background-color:' + v_bgcol + ';' + "\n"; }
  if (v_image  != '') { result += 'background-image:url("' + v_image + '");' + "\n"; }
  if (v_origin != '') { result += 'background-position:' + v_origin + ';' + "\n"; }
  if (v_repeat != '') { result += 'background-repeat:' + v_repeat + ';' + "\n"; }
  result += '}' + "\n";
  
  jQuery('#result').val(result.replace(/\&/g, '&amp;'));
};
</script>
<style type="text/css">
  *{margin:0;padding:0;font-family:"ＭＳ Ｐゴシック", Osaka, sans-serif;font-size:12px;line-height:1.25;}
  #inp_form{width:400px}
  table{margin-left:15px;}
  table, tr, td{border:none;}
  td{width:180px;}
  input,select,button{width:178px;}
  textarea{width: 360px;}
</style>
</head>
<body>
<div id="inp_form" style="text-align:left">
<form>
<table>
<tr>
  <td>セレクタ : </td>
  <td>
    <select id="selector">
      <option value=".skinSubArea .skinMenuHeader" selected>全体</option>
      <option value=".skinSubA .skinMenuHeader">カラムA(太い方)</option>
      <option value=".skinSubB .skinMenuHeader">カラムB(細い方)</option>
      <option value=".profileMenu .skinMenuHeader">プロフィール</option>
      <option value=".readerMenu .skinMenuHeader">このブログの読者</option>
      <option value=".favoriteMenu .skinMenuHeader">お気に入りブログ</option>
      <option value=".bookmarkMenu .skinMenuHeader">ブックマーク</option>
      <option value=".recentEntriesMenu .skinMenuHeader">最近の記事</option>
      <option value=".recentCommentMenu .skinMenuHeader">最近のコメント</option>
      <option value=".themeMenu .skinMenuHeader">テーマ</option>
      <option value=".archiveMenu .skinMenuHeader">月別</option>
      <option value=".calendarMenu .skinMenuHeader">カレンダー</option>
      <option value=".rankingMenu .skinMenuHeader">ランキング</option>
    </select>
  </td>
</tr>
<tr>
  <td>高さ : </td>
  <td><input type="text" id="height" value=""></td>
</tr>
<tr>
  <td>文字配置 : </td>
  <td>
    <select id="align">
      <option value="" selected></option>
      <option value="left">左寄せ</option>
      <option value="center">中央揃え</option>
      <option value="right">右寄せ</option>
      <option value="hide">非表示</option>
    </select>
  </td>
</tr>
<tr>
  <td>太字 : </td>
  <td>
    <select id="weight">
      <option value="" selected></option>
      <option value="bold">太字</option>
      <option value="normal">通常</option>
    </select>
  </td>
</tr>
<tr>
  <td>文字色 : </td>
  <td><input type="text" id="color" value=""></td>
</tr>
<tr>
  <td>背景色 : </td>
  <td><input type="text" id="bgcol" value=""></td>
</tr>
<tr>
  <td>背景画像のURL : </td>
  <td><input type="text" id="image" value=""></td>
</tr>
<tr>
  <td>背景画像を寄せる位置 : </td>
  <td>
    <select id="origin">
      <option value="" selected></option>
      <option value="left top">左・上</option>
      <option value="left center">左・中央</option>
      <option value="left bottom">左・下</option>
      <option value="center top">中央・上</option>
      <option value="center center">中央・中央</option>
      <option value="center bottom">中央・下</option>
      <option value="right top">右・上</option>
      <option value="right center">右・中央</option>
      <option value="right bottom">右・下</option>
    </select>
  </td>
</tr>
<tr>
  <td>背景画像の並べ方 : </td>
  <td>
    <select id="repeat">
      <option value="" selected></option>
      <option value="no-repeat">並べない</option>
      <option value="repeat-x">横に並べる</option>
      <option value="repeat-y">縦に並べる</option>
      <option value="repeat">タイル状に並べる</option>
    </select>
  </td>
</tr>
<tr>
  <td>&nbsp;</td>
  <td>
    <button type="button" onclick="mkcss();return false;">OK</button>
  </td>
</tr>
<tr>
  <td colspan="2">
    <textarea id="result" rows="5" onclick="this.select()"></textarea>
  </td>
</tr>
</table>
</form>
<div style="text-align:center;font-size:10px">powered by <a href="http://ameblo.jp/wazameba/" target="_top">アメブロカスタマイズで自分らしい空間を作る技</a></div>
</div>
</body>
</html>
